<template>
  <div class="app">
    <AppHeader></AppHeader>
    <section class="m-t vh container">
      <!-- nav -->
      <nav class="app-nav">
        <AppLogo></AppLogo>
        <Menu class="app-menu" :active-name="activeName" :width="'140px'" @on-select="handleMenuSelect">
          <template v-for="(item) in categoryList">
            <menu-item class="menu-item" :name="`/channel/${item.category_id}`" :key="item.id">{{item.category_name}}</menu-item>
          </template>
        </Menu>
      </nav>
      <!-- main -->
      <main class="app-main">
        <!-- slide -->
        <div class="slide">
          <Carousel v-model="sideIndex" loop height="auto">
              <CarouselItem>
                  <div class="demo-carousel">1</div>
              </CarouselItem>
              <CarouselItem>
                  <div class="demo-carousel">2</div>
              </CarouselItem>
              <CarouselItem>
                  <div class="demo-carousel">3</div>
              </CarouselItem>
              <CarouselItem>
                  <div class="demo-carousel">4</div>
              </CarouselItem>
          </Carousel>
        </div>
        <!-- list -->
        <media-list>
          <media-item v-for="item in articleList" :key="item.id" :data="item"/>
        </media-list>
      </main>
      <!-- aside -->
      <aside class="app-aside">
        <!-- hot -->
        <Card class="aside-card">
          <h3 slot="title" class="aside-card__title">
            <Icon class="icon" type="navicon" size="16"></Icon>热点推送
          </h3>
          <media-list>
            <media-item class="media-item--small" v-for="item in articleList" :key="item.id" :data="item"/>
          </media-list>
        </Card>
        <!-- seach -->
        <Card class="aside-card">
          <h3 slot="title" class="aside-card__title">
            <Icon class="icon" type="navicon" size="16"></Icon>热门搜索
          </h3>
          <div class="aside-card__body">
            <ul class="text-list">
              <li class="text-list-item" v-for="(item, index) in 10" :key="item">
                <span class="index">{{index}}</span> 实现基于Nuxt.js的SSR应用
              </li>
            </ul>
          </div>
        </Card>
        <!-- keywords -->
        <Card class="aside-card">
          <h3 slot="title" class="aside-card__title">
            <Icon class="icon" type="navicon" size="16"></Icon>关键词
          </h3>
          <div class="aside-card__body">
            <Tag v-for="item in 50" :key="item">标签({{item}})</Tag>
          </div>
        </Card>
      </aside>
    </section>
  </div>
</template>

<script>
import AppHeader from '~/components/AppHeader'
import AppLogo from '~/components/AppLogo'
import { MediaList, MediaItem } from '~/components/MediaList'
import category from '~/api/category'
import article from '~/api/article'

export default {
  name: 'App',
  components: {
    AppHeader,
    AppLogo,
    MediaList,
    MediaItem
  },
  async asyncData ({ params }) {
    const { list } = await category.query({})
    let categoryId = params.id || (list[0] && list[0].category_id)
    let articleData = await article.query({categoryId})
    return {
      activeName: `/channel/${categoryId}`,
      categoryList: list,
      articleList: articleData.list
    }
  },
  data () {
    return {
      sideIndex: 0
    }
  },
  methods: {
    handleMenuSelect (name) {
      this.$router.push(name)
    }
  }
}
</script>
